import React, {useRef, useState} from "react";
import {Button, Divider, message, Modal} from "antd";
import ProTable, {ActionType, ProColumns, RequestData} from "@ant-design/pro-table";
import {DeleteOutlined, EditOutlined} from "@ant-design/icons";
import {ParamsType} from "@ant-design/pro-provider";
import moment from "moment";
import roleService from "@/services/role";
import {arrayToTree, transformParams} from "@/utils/utils";
import {RoleModifyForm} from "@/pages/integrate/role/Form";
import {RoleVO} from "@/types/role";

const queryList= async (params:any, sorter:any, filter:any): Promise<RequestData<RoleVO>> => {
  const  dto = transformParams(params, sorter);
  const response=await roleService.queryList(dto);
  const {data}=response;
  return {
    success:true,
    data: arrayToTree(data),
  };
}

const _delete=async (params:any)=>{
  const response=await roleService._delete(params)
  const {exception}=response;
  if(!exception){
    message.success('删除成功');
  }
}

interface RoleListProps {
  params?:ParamsType;
  actionRef?:((actionRef: ActionType) => void);
}

const RoleList: React.FC<RoleListProps> = (props:RoleListProps) => {

  const actionRef = useRef<ActionType>();

  const onActionRef=(ref:ActionType)=>{
    actionRef.current=ref;
    props.actionRef&&props.actionRef(ref);
  }

  /**
   * @en-US The pop-up window of the distribution update window
   * @zh-CN 分布更新窗口的弹窗
   * */
  const [modifyModalVisible, handleModifyModalVisible] = useState<boolean>(false);

  const [currentRow, setCurrentRow] = useState<RoleVO |undefined>(undefined);

  const showModifyModal=(record:RoleVO) => {
    handleModifyModalVisible(true);
    setCurrentRow(record);
  }

  const showDeleteModal=async (record:RoleVO) => {
    Modal.confirm({
      title: '是否删除该角色',
      content: record.name,
      onOk:()=>{
        // @ts-ignore
        _delete({id: record.id});
        actionRef.current?.reload();
      }
    })
  }

  const onReset=()=>{
    onVisibleChange();
    actionRef.current?.reload();
  }

  const onVisibleChange=()=>{
    handleModifyModalVisible(false);
    setCurrentRow(undefined);
  }

  const columns: ProColumns<RoleVO>[] = [
    {
      title: '角色名称',
      align:'left',
      dataIndex: ['name'],
    },
    {
      title: '创建时间',
      align:'center',
      dataIndex: ['gmtCreated'],
      search:false,
      sorter:false,
      render:(dom,entity,index,action,schema)=>{
        return moment(entity.gmtCreated).format('YYYY-MM-DD')
      }
    },
    {
      title: '更新时间',
      align:'center',
      dataIndex: ['gmtModified'],
      search:false,
      sorter:false,
      render:(dom,entity,index,action,schema)=>{
        return moment(entity.gmtModified).format('YYYY-MM-DD')
      }
    },
    {
      title: '操作',
      align:'center',
      dataIndex: 'action',
      search:false,
      render:(dom,entity,index,action,schema)=>{
        return (
          <>
            <Button
              type="link"
              icon={<EditOutlined />}
              onClick={()=>showModifyModal(entity)}
            />
            <Divider type={"vertical"} />
            <Button
              type="link"
              icon={<DeleteOutlined />}
              onClick={()=>showDeleteModal(entity)}
            />
          </>
        )
      }
    },
  ];

  return (
    <>
      <ProTable<RoleVO>
        actionRef={onActionRef}
        // @ts-ignore
        rowKey={((record) => record.id)}
        params={props.params}
        search={false}
        pagination={false}
        toolBarRender={false}
        request={queryList}
        columns={columns}
      />
      {currentRow&&(
        <RoleModifyForm
          entity={currentRow}
          onReset={onReset}
          visible={modifyModalVisible}
          onVisibleChange={onVisibleChange}
        />
      )}
    </>
);
};

export default RoleList
